<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心 | VigorLoop</title>


    <!--STYLESHEET-->
    <!--=================================================-->

    <!--Open Sans Font [ OPTIONAL ]-->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>


    <!--Bootstrap Stylesheet [ REQUIRED ]-->
    <link href="/static/nifty/css/bootstrap.min.css" rel="stylesheet">


    <!--Nifty Stylesheet [ REQUIRED ]-->
    <link href="/static/nifty/css/nifty.min.css" rel="stylesheet">


    <!--Nifty Premium Icon [ DEMONSTRATION ]-->
    <link href="/static/nifty/css/demo/nifty-demo-icons.min.css" rel="stylesheet">


    <!--Demo [ DEMONSTRATION ]-->
    <link href="/static/nifty/css/demo/nifty-demo.min.css" rel="stylesheet">


    <!--Morris.js [ OPTIONAL ]-->
    <link href="/static/nifty/plugins/morris-js/morris.min.css" rel="stylesheet">


    <!--Magic Checkbox [ OPTIONAL ]-->
    <link href="/static/nifty/plugins/magic-check/css/magic-check.min.css" rel="stylesheet">


    <!--JAVASCRIPT-->
    <!--=================================================-->

    <!--Pace - Page Load Progress Par [OPTIONAL]-->
    <link href="/static/nifty/plugins/pace/pace.min.css" rel="stylesheet">
    <script src="/static/nifty/plugins/pace/pace.min.js"></script>


    <!--jQuery [ REQUIRED ]-->
    <script src="/static/nifty/js/jquery-2.2.4.min.js"></script>


    <!--BootstrapJS [ RECOMMENDED ]-->
    <script src="/static/nifty/js/bootstrap.min.js"></script>


    <!--NiftyJS [ RECOMMENDED ]-->
    <script src="/static/nifty/js/nifty.min.js"></script>


    <!--=================================================-->

    <!--Demo script [ DEMONSTRATION ]-->
    <script src="/static/nifty/js/demo/nifty-demo.min.js"></script>


    <!--Morris.js [ OPTIONAL ]-->
    <script src="/static/nifty/plugins/morris-js/morris.min.js"></script>
    <script src="/static/nifty/plugins/morris-js/raphael-js/raphael.min.js"></script>


    <!--Sparkline [ OPTIONAL ]-->
    <script src="/static/nifty/plugins/sparkline/jquery.sparkline.min.js"></script>


    <!--Specify page [ SAMPLE ]-->
    <script src="/static/nifty/js/demo/dashboard.js"></script>


    <!--=================================================

    REQUIRED
    You must include this in your project.


    RECOMMENDED
    This category must be included but you may modify which plugins or components which should be included in your project.


    OPTIONAL
    Optional plugins. You may choose whether to include it in your project or not.


    DEMONSTRATION
    This is to be removed, used for demonstration purposes only. This category must not be included in your project.


    SAMPLE
    Some script samples which explain how to initialize plugins or components. This category should not be included in your project.


    Detailed information and more samples can be found in the document.

    =================================================-->


</head>

<!--TIPS-->
<!--You may remove all ID or Class names which contain "demo-", they are only used for demonstration. -->
<body>
<div id="container" class="effect aside-float aside-bright mainnav-lg">

    <!--NAVBAR-->
    <!--===================================================-->
    <header id="navbar">
        <div id="navbar-container" class="boxed">

            <!--Brand logo & name-->
            <!--================================-->
            <div class="navbar-header">
                <a href="" class="navbar-brand">
                    <img src="/static/nifty/img/logo.png" alt="VigorLoop Logo" class="brand-icon">
                    <div class="brand-title">
                        <span class="brand-text">VigorLoop</span>
                    </div>
                </a>
            </div>
            <!--================================-->
            <!--End brand logo & name-->


            <!--Navbar Dropdown-->
            <!--================================-->
            <div class="navbar-content clearfix">
                <ul class="nav navbar-top-links pull-left">

                    <!--Navigation toogle button-->
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <li class="tgl-menu-btn">
                        <a class="mainnav-toggle" href="#">
                            <i class="demo-pli-view-list"></i>
                        </a>
                    </li>
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <!--End Navigation toogle button-->


                </ul>
                <ul class="nav navbar-top-links pull-right">

                    <!--User dropdown-->
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <li id="dropdown-user" class="dropdown">
                        <a href="#" data-toggle="dropdown" class="dropdown-toggle text-right">
                                <span class="pull-right">
                                    <!--<img class="img-circle img-user media-object" src="/static/nifty/img/profile-photos/1.png" alt="Profile Picture">-->
                                    <i class="demo-pli-male ic-user"></i>
                                </span>
                            <div class="username hidden-xs">
                                {% if user.is_authenticated %}{{ user.username }}{% else %}未登录用户{% endif %}</div>
                        </a>


                        <div class="dropdown-menu dropdown-menu-md dropdown-menu-right panel-default">

                            <!-- Dropdown heading  -->
                            <div class="pad-all bord-btm">
                                欢迎使用 VigorLoop！
                            </div>


                            <!-- User dropdown menu -->
                            <ul class="head-list">
                                <li>
                                    <a href="/user_center/">
                                        <i class="demo-pli-male icon-lg icon-fw"></i> 个人中心
                                    </a>
                                </li>

                            </ul>

                            <!-- Dropdown footer -->
                            <div class="pad-all text-right">
                                <a href="/logout/" class="btn btn-primary">
                                    <i class="demo-pli-unlock"></i> 退出
                                </a>
                            </div>
                        </div>
                    </li>
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <!--End user dropdown-->
                </ul>
            </div>
            <!--================================-->
            <!--End Navbar Dropdown-->

        </div>
    </header>
    <!--===================================================-->
    <!--END NAVBAR-->

    <div class="boxed">

        <!--CONTENT CONTAINER-->
        <!--===================================================-->
        <div id="content-container">

            <!--Page Title-->
            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
            <div id="page-title">
                <h1 class="page-header text-overflow">个人中心</h1>

            </div>
            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
            <!--End page title-->

            <!--Page content-->
            <!--===================================================-->
            <div id="page-content">

                <div class="row">
                    <div class="col-lg-12">

                        <!--Profile Widget-->
                        <!--===================================================-->
                        <div class="panel">
                            <div class="panel-body text-center bg-success">
                                <img alt="Avatar" class="img-lg img-circle img-border mar-btm"
                                     src="/static/nifty/img/profile-photos/1.png">

                                <h4 class="mar-n">{{ user_info.username }}</h4></p>
                                <p class="text-md">
                                    {{ user_info.join_date|date:"Y-m-d" }} 加入 VigorLoop
                                </p>
                                <ul class="list-unstyled text-center pad-top mar-no row">
                                    <li class="col-xs-4">
                                        <span class="text-lg text-semibold">{{ exercises_count }}</span>
                                        <p class="text-sm mar-no">运动记录</p>
                                    </li>
                                    <li class="col-xs-4">
                                        <span class="text-lg text-semibold">{{ complete_count }}</span>
                                        <p class="text-sm mar-no">运动目标完成</p>
                                    </li>
                                    <li class="col-xs-4">
                                        <span class="text-lg text-semibold">{{ health_profile_count }}</span>
                                        <p class="text-sm mar-no">健康记录</p>
                                    </li>
                                </ul>
                            </div>
                            <div class="list-group bg-trans pad-btm pad-top">
                                <a class="list-group-item" href="/user_center/change_password">
                                    <i class="demo-pli-file-edit icon-lg icon-fw"></i>
                                    修改密码
                                </a>
                                <a class="list-group-item" href="#">
                                    <span class="label label-danger pull-right">Logout</span>
                                    <i class="demo-pli-remove-user icon-lg icon-fw"></i>
                                    退出
                                </a>
                            </div>
                        </div>
                        <!--===================================================-->

                    </div>
                </div>

                <div class="row">

                </div>
            </div>
            <!--===================================================-->
            <!--End page content-->


        </div>
        <!--===================================================-->
        <!--END CONTENT CONTAINER-->


        <!--MAIN NAVIGATION-->
        <!--===================================================-->
        <nav id="mainnav-container">
            <div id="mainnav">

                <!--Menu-->
                <!--================================-->
                <div id="mainnav-menu-wrap">
                    <div class="nano">
                        <div class="nano-content">

                            <!--Profile Widget-->
                            <!--================================-->
                            <div id="mainnav-profile" class="mainnav-profile">
                                <div class="profile-wrap">
                                    <div class="pad-btm">
                                        <img class="img-circle img-sm img-border"
                                             src="/static/nifty/img/profile-photos/1.png" alt="Profile Picture">
                                    </div>
                                    <a href="#profile-nav" class="box-block" data-toggle="collapse"
                                       aria-expanded="false">
                                        <p class="mnp-name">{% if user.is_authenticated %}{{ user.username }}{% else %}
                                            未登录用户{% endif %}</p>
                                    </a>
                                </div>
                            </div>

                            <ul id="mainnav-menu" class="list-group">

                                <!--Category name-->
                                <li class="list-header">健康中心</li>

                                <!--Menu list item-->
                                <li>
                                    <a href="/index/">
                                        <i class="demo-psi-home"></i>
                                        <span class="menu-title">
												<strong>首页</strong>
											</span>
                                    </a>
                                </li>

                                <!--Menu list item-->
                                <li>
                                    <a href="#">
                                        <i class="demo-psi-boot-2"></i>
                                        <span class="menu-title">
												<strong>我的运动数据</strong>
											</span>
                                        <i class="arrow"></i>
                                    </a>

                                    <!--Submenu-->
                                    <ul class="collapse">
                                        <li><a href="/exercise_info/exercise_record/">查看运动数据</a></li>
                                        <li><a href="/exercise_info/add_exercise_record/">新增运动数据</a></li>
                                    </ul>
                                </li>

                                <li>
                                    <a href="#">
                                        <i class="demo-psi-star"></i>
                                        <span class="menu-title">
												<strong>我的运动目标</strong>
											</span>
                                        <i class="arrow"></i>
                                    </a>

                                    <!--Submenu-->
                                    <ul class="collapse">
                                        <li><a href="/exercise_info/exercise_goal/">查看运动目标</a></li>
                                        <li><a href="/exercise_info/exercise_goal/">新增运动目标</a></li>
                                    </ul>
                                </li>

                                <!--Menu list item-->
                                <li>
                                    <a href="/health_profile/">
                                        <i class="demo-psi-receipt-4"></i>
                                        <span class="menu-title">
												<strong>我的健康数据</strong>
											</span>
                                        <i class="arrow"></i>
                                    </a>

                                    <!--Submenu-->
                                    <ul class="collapse">
                                        <li><a href="/health_profile/">查看健康数据</a></li>
                                        <li><a href="/health_profile/add/">新增健康数据</a></li>
                                        <li><a href="/health_profile/analysis">健康分析</a></li>
                                    </ul>
                                </li>

                                <li class="list-divider"></li>

                                <!--Category name-->
                                <li class="list-header">其他</li>

                                <!--Menu list item-->
                                <li class="active-link">
                                    <a href="/user_center/">
                                        <i class="demo-psi-male"></i>
                                        <span class="menu-title">
												<strong>个人中心</strong>
											</span>
                                    </a>
                                </li>

                            </ul>
                        </div>
                    </div>
                </div>
                <!--================================-->
                <!--End menu-->

            </div>
        </nav>
        <!--===================================================-->
        <!--END MAIN NAVIGATION-->

    </div>


    <!-- FOOTER -->
    <!--===================================================-->
    <footer id="footer">

        <!-- Visible when footer positions are fixed -->
        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        <div class="show-fixed pull-left">
            You have <a href="#" class="text-bold text-main"><span class="label label-danger">3</span> pending
            action.</a>
        </div>

        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        <!-- Remove the class "show-fixed" and "hide-fixed" to make the content always appears. -->
        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

        <p class="pad-lft">&#0169; 2024 VigorLoop</p>


    </footer>
    <!--===================================================-->
    <!-- END FOOTER -->


    <!-- SCROLL PAGE BUTTON -->
    <!--===================================================-->
    <button class="scroll-top btn">
        <i class="pci-chevron chevron-up"></i>
    </button>
    <!--===================================================-->

</div>
<!--===================================================-->
<!-- END OF CONTAINER -->

</body>
</html>
